<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-page-header @back="$router.go(-1)" content="定时任务日志" />
      </div>
      <div class="operation-right">
        <el-button class="el-icon-refresh" @click="getList" size="mini"></el-button>
      </div>
    </div>
    <div class="main-list" v-loading="loading">
      <template v-if="list.length > 0">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <span v-if="item.indexOf('取消任务') !== -1" style="color: #ea5252;">{{ item }}</span>
          <span v-else style="color: #6fc56f;">{{ item }}</span>
        </div>
      </template>
      <template v-else>
        <div class="list-no-item">暂无数据</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'taskLog',
  data () {
    return {
      list: [],
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () { // 获取日志列表
      this.list = []
      this.loading = true
      this.$API({
        name: 'TaskLog',
        data: this.$route.params.id,
        headers: {
          'Content-type': 'text/plain'
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          res.data.data.split('\n').forEach(item => {
            if (item !== '') {
              this.list.push(item)
            }
          })
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px 10px 0 10px;
  .list-item {
    padding: 10px 0;
    border-bottom: 1px dashed #efefef;
  }
  .list-no-item {
    color: #777;
  }
}
</style>